<template>
    <!-- 二级菜单处 -->
    <div>
        <!-- <RouterView></RouterView> -->
        <RouterView v-slot="{Component,route}">
            <Transition name="silde-fade" mode="out-in">
                <KeepAlive :max="5">
                    <component :is="Component" v-if="route.meta.keepAlive" :key="route.fullPath"></component>
                </KeepAlive>
            </Transition>
            <Transition name="silde-fade" mode="out-in">
                <KeepAlive :max="5">
                    <component :is="Component" v-if="!route.meta.keepAlive" :key="route.fullPath"></component>
                </KeepAlive>
            </Transition>
        </RouterView>
    </div>
</template>
<style lang="less">
    .silde-fade-enter-active{
        transition: all 0.3s ease-out;
    }
    .silde-fade-leave-active{
        transition: all 0.3s cubic-bezier(1,0.5,0.8,1);
    }
    .silde-fade-enter-from,.silde-fade-leave-to{
        transform: translateX(-50px);
        opacity: 0;
    }
</style>